<template>
  <div>
    <p>123</p>
    <p>Received Message: {{ message }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { SSEClient } from '@/api/SSEClient'
import { userApi } from '@/api/api'

// 定义 message 和事件源的引用
const message = ref<string>("")
let eventSource: SSEClient | null = null

onMounted(() => {
  // 初始化 SSEClient 实例
  eventSource = userApi.sseTest()

  // 监听 'message' 事件
  eventSource.on('message', (event) => {
    console.log(event)
    message.value = event.data
  })
})

onBeforeUnmount(() => {
  // 在组件卸载时关闭 SSE 连接，防止内存泄漏
  if (eventSource) {
    eventSource.close() // 关闭连接
    eventSource = null // 清空引用
  }
})
</script>

<style scoped>
/* 样式部分根据需要自定义 */
</style>
